<template>
  <div class="goods">
    <div class="menu-wrapper" ref="menuwrapper">
      <ul>
        <li v-for="(value,index) in goods" class="menu-item" :class="{current:curreentIndex === index}" @click="selectMenu(index)">
          <span class="text">
            <span v-show="value.type>0" class="icon" :class="classMap[value.type]"></span>{{value.name}}</span>
        </li>
      </ul>
    </div>
    <div class="foods-wrapper" ref="foodswrapper">
      <ul>
        <li  v-for="item in goods" class="food-list food-list-hook">
          <h1 class="title">{{item.name}}</h1>
          <ul>
            <li v-for="food in item.foods" class="food-item">
              <div class="icon"  @click="selectFood(food,$event)">
                <img :src="food.icon">
              </div>
              <div class="content">
                <h2 class="name">{{food.name}}</h2>
                <p class="desc">{{food.description}}</p>
                <div class="extra">
                  <span>月售{{food.sellCount}}份</span>
                  <span>好评律{{food.rating}}%</span>    
                </div>
                <div class="price">
                  <span class="now">¥{{food.price}}</span>
                  <span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>
                </div>
                <div class="cartcontrol-wrapper">
                  <cartcontrol :food="food"></cartcontrol>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <shopcart :selectfoods="selectfoods" :deliveryprice="seller.deliveryPrice" :minprice="seller.minPrice"></shopcart>
    <food :food="selectedFood" ref="food"></food> 
  </div>
</template>

<script>
  import Scroll from 'better-scroll'
  import shopcart from '@/components/shopcart/shopcart.vue'
  import cartcontrol from '@/components/cartcontrol/cartcontrol.vue'
  import food from '@/components/food/food'
  const  ERR_OK = 0;
  export default {
    props:{
      seller:{
        type:Object
      }
     },
     created(){
      this.$http.get('https://easy-mock.com/mock/5a840ba0ca58457ccde2aa13/example/').then((response)=>{
        let data= response.body
        if(data.errNum === ERR_OK){
            this.goods = data.goods
            this.$nextTick(()=>{
              this._initScroll()
              this.calcHeight()
          })
          
        }
      })
    },
     data(){
        return{
          goods:[],
          classMap : ['decrease', 'discount', 'special', 'invoice', 'guarantee'],
          listHeight:[],
          scrollY:0,
          selectedFood:{}
        }
     },
     computed:{
       curreentIndex(){
         for(let i=0;i<this.listHeight.length;i++){
           let height1 = this.listHeight[i]
           let height2 = this.listHeight[i+1]
           if(!height2 || (this.scrollY >= height1 && this.scrollY < height2)){
            return i
           }
         }
        return 0
       },
       selectfoods(){
          let foods=[]
          this.goods.forEach((good)=>{
            good.foods.forEach((food)=>{
              if(food.count){
                foods.push(food)
              }
            })
          })
         return foods;
       }
     },
     methods: {
       _initScroll(){
         this.menuScroll=new Scroll(this.$refs.menuwrapper,{
           click:true
         })
         this.foodsScroll=new Scroll(this.$refs.foodswrapper,{
           probeType:3,
           click:true
         })
         this.foodsScroll.on('scroll',(pos) => {
           this.scrollY = Math.abs(Math.round(pos.y))
         })
       },
       calcHeight(){
          let foodList = this.$refs.foodswrapper.getElementsByClassName('food-list-hook');
          let height = 0;
          this.listHeight.push(height);
          for(let i = 0;i<foodList.length;i++){
            let item = foodList[i]
            height+=item.clientHeight;
            this.listHeight.push(height);
          }
       },
       selectMenu(index){
          let foodList = this.$refs.foodswrapper.getElementsByClassName('food-list-hook'); 
          let el = foodList[index]
          this.foodsScroll.scrollToElement(el,300)
       },
       selectFood(food,event){
         this.selectedFood = food;
         this.$refs.food.show();
       }      

     },
     components:{
       shopcart,
       cartcontrol,
       food
     }
  }
</script>
<style>
  .goods{
    display: flex;
    position: absolute;
    top: 174px;
    width: 100%;
    top: 174px;
    bottom: 46px;
    z-index: 30;
  }
  .menu-wrapper{
    flex: 0 0 80px;
    width: 80px;
    background-color: #f3f5f7;
    overflow: hidden;
  }
  .foods-wrapper{
    flex: 1;
    overflow: hidden;
  }
  .menu-item{
    display: table;
    height: 54px;
    width: 56px;
    line-height: 14px;
    padding: 0 12px;
    position: relative;
    font-size: 0px;
  }
  .menu-wrapper .current{
    position: relative;
    margin-top: -1px;
    background: #fff;
    font-weight: 700;
  }
  .menu-item::after{
    position: absolute;
    display: block;
    content: '';
    left: 0;
    bottom: 0;
    border-top:1px solid rgba(7,17,27,0.1);
    width: 100%; 
  }
  @media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
    .menu-item::after{
            -webkit-transform: scaleY(0.7);
            transform: scaleY(0.7);
    }
}

@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
     .menu-item::after{
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
    }
}
   .menu-item .icon{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 2px;
    background-size: 12px 12px;
    background-repeat: no-repeat;
  }
   .menu-item.decrease{
    background-image: url(decrease_1@2x.png);
 }
  .menu-item .discount{
    background-image: url(discount_1@2x.png);
 }
   .menu-item .guarantee{
    background-image: url(guarantee_1@2x.png);
 }
   .menu-item .invoice{
    background-image: url(invoice_1@2x.png);
 }
   .menu-item .special{
    background-image: url(special_1@2x.png);
 }
  .menu-item .text{
  line-height: 12px;
  font-size: 12px;
  width: 56px;
  display: table-cell;
  vertical-align: middle;
 }
 .foods-wrapper .title{
   padding-left: 14px;
   height: 26px;
   line-height: 26px;
   border-left:2px solid #d9dde1;
   font-language-override: 12px; 
   color: rgb(147,153,159);
   background: #f3f5f7;
   text-align: left;
 }
 .foods-wrapper .food-item{
   display: flex;
   margin: 18px;
 }
 .foods-wrapper .food-item .icon{
   width: 57px;
   height: 57px;
   margin-right: 10px;
 }
 .foods-wrapper .food-item .icon img{
   width: 100%;
 }
 .foods-wrapper .food-item .content{
   text-align: left;
   flex: 1;
   position: relative;
   color:rgb(7,17,27)
 }
 .foods-wrapper .food-item .content .name{
  margin-top: 2px;
  margin-bottom:8px;
  line-height: 14px;
  font-size: 14px; 
 }
 .foods-wrapper .food-item .content .desc,.foods-wrapper .food-item .content .extra{
   line-height: 12px;
   font-size: 10px;
   color: rgb(147,153,159);
 }
  .foods-wrapper .food-item .content .desc{
   margin-bottom: 8px;
  }
  .foods-wrapper .food-item .content .extra{
    line-height: 10px;
  }
  .foods-wrapper .food-item .content .price{
    font-weight: 700;
    line-height: 24px;
  }
  .foods-wrapper .food-item .content .price .now{
    font-size: 14px;
    margin-top: 8px;
    color: rgb(240,20,20);
  }
  .foods-wrapper .food-item .content .price .old{
    text-decoration: line-through;
    font-size: 10px;
    color: rgb(147,153,159);
  }
  .cartcontrol-wrapper{
    position: absolute;
    bottom: 4px;
    right: 0;
  }
</style>
